<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.js"></script>
    <style>
        img {
            width: 90%;
        }
    </style>
</head>
<body>


<div id="app">
    <p><img :src="image"></p>
    <p>
        <button @click="pre()">上一张</button>
        <button @click="next()">下一张</button>
    </p>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            images: [
                'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/daa8668ce81bc05a5b8a6ef05072047d.jpg',
                'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/802443805243d8505730c204a391bf0a.jpg',
                'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2ddb0b010106ddfee9ce39843e451705.jpg',
                'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6ddaa05fc2385ded9081a56dfb20ae0d.jpg'
            ],
            image: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/daa8668ce81bc05a5b8a6ef05072047d.jpg',
            index: 0
        },
        methods: {
            pre() {
                this.index--
                if (this.index<0){
                    this.index= 3
                }
                this.image = this.images[this.index]
            },
            next() {
                this.index++
                if (this.index>3){
                    this.index = 0
                }
                this.image = this.images[this.index]
            }
        }
    })
</script>
</body>
</html>